import React, { Component } from 'react'
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Image,
    Dimensions,
    PanResponder,//用的就是这个核心组件
    Alert
} from 'react-native';

const SCREEN_WIDTH = Dimensions.get('window').width;//屏幕的宽
const SCREEN_HEIGHT = Dimensions.get('window').height;//屏幕的高


export default class C extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isFresh: false, // 定义是否刷新的标志
            topHeight: 0,
            isRunning:false
        };
    }

    componentWillMount() {

        this._panResponder = PanResponder.create({
            //监听的事件回调,必须设为true,否则事件无法监听
            onStartShouldSetPanResponder: () => true,
            onMoveShouldSetPanResponder: () => true,

            onPanResponderMove: (evt, gs) => {

                var that = this;
                if (!that.state.isRunning) {
                    console.log(gs.dy);
                    this.setState({
                        'topHeight': gs.dy
                    })
                    //可自定义滑动距离
                    if (gs.dy >= 80) {
                        this.setState({
                            isFresh: true,
                            topHeight: 80,
                            isRunning: false
                        })
                    }
                }




            },

            onPanResponderRelease: () => {


                var that = this;
                if (this.state.isFresh) {
                    console.log("大于等于80")
                    this.setState({
                        //需置为false,否则就失去了监听的效果
                        isFresh: false
                    })

                    var h = this.state.topHeight;

                    if (!that.state.isRunning) {
                        this.state.isRunning = true;
                        ID = setInterval(function () {
                            h = h - 5;

                            that.setState({
                                topHeight: h
                            })
                            if (h <= 0) {
                                clearInterval(ID);
                                that.state.isRunning = false;
                                that.setState(
                                    {
                                        isRunning: false,
                                        topHeight: 0
                                    }
                                );
                            }
                        }, 5);
                    }

                }
            },

        })
    }


    render() {
        return (
            <View
                {...this._panResponder.panHandlers}//可以在任意控件写,调起已经写好的回调
                style={styles.container}>
                <View style={{ backgroundColor: 'red', height: this.state.topHeight, width: SCREEN_WIDTH }}>
                    <Image source={require('../../assets/imgs/refresh.png')} style={{}} />
                </View>
                <View style={{ backgroundColor: 'blue', height: 1000, width: SCREEN_WIDTH }}>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {

    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});
